<style lang="scss">
  .dialog-wrap {
    display: flex;
    justify-content: center;
  }
  
  .dialog-detail {
    font-size: 14px;
    color: #333;
    text-align: center;
    margin-top: 20px;
  }
</style>
<template>
  <el-dialog v-if="show" :visible.sync="show" title="进度条" width="30%" :append-to-body="true"
             :close-on-click-modal="false" :close-on-press-escape="false">
    
    <div class="dialog-wrap">
      <el-progress type="circle" :percentage="percent" :stroke-width="10"></el-progress>
    </div>
    <div class="dialog-detail">{{msg}}</div>
    
    <span slot="footer">
        <el-button @click="show = false">取 消</el-button>
      </span>
  </el-dialog>
</template>

<script>
    import {progressBarApi} from "@/api/business/processed";

    export default {
        data() {
            return {
                show: false,
                timer: null,
                percent: 0,
                msg: ''
            }
        },
        watch: {
            show(newVal, oldVal) {
                if (!newVal) {
                    clearInterval(this.timer);
                    this.timer = null;
                    this.$emit('callback');
                }
            }
        },
        methods: {
            open(uuid) {
                this.show = true;

                this.timer = setInterval(() => {
                    progressBarApi({
                        uuid
                    }).then(resp => {
                        this.percent = resp.data.schedule;
                        this.msg = resp.data.information;

                        if (this.percent == 100) {
                            this.show = false;
                            this.$message.success('执行成功！');
                        }
                    }).catch(() => {
                        this.show = false;
                    })
                }, 1500)
            }
        }
    }
</script>
